<template>
  <div>
    <el-divider>选项</el-divider>
    <div>
      <draggable
        :animation="340"
        :list="activeData.reserveProjectList"
        group="selectItem"
        handle=".option-drag"
      >
        <div
          v-for="(item, index) in activeData.reserveProjectList"
          :key="index"
          class="select-item"
        >
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.name" placeholder="项目名称" size="small" />
          <div
            class="select-line-icon"
            @click="handleSettingGoods(item, index)"
          >
            <i class="el-icon-s-tools" />
          </div>
          <div
            class="close-btn select-line-icon"
            @click="activeData.reserveProjectList.splice(index, 1)"
          >
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px; margin-bottom: 10px">
        <el-button
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addProjectItem"
        >
          添加项目
        </el-button>
      </div>
    </div>
    <el-dialog title="项目信息" :visible.sync="dialogVisible">
      <el-form :model="selectProject" label-position="left" label-width="80px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="selectProject.name" />
        </el-form-item>
      </el-form>
      <el-form :model="selectProject" label-position="top">
        <el-form-item label="预约名额" prop="name">
          <p class="text-danger">请注意，不填写则表示无需限制预约名额</p>
          <table class="el-table el-table--border">
            <tbody>
              <tr>
                <th>预约时段</th>
                <th>名额</th>
              </tr>
              <tr
                v-for="(tr, index) in selectProject.timeRangeList"
                :key="index"
              >
                <td class="el-table__cell is-center">
                  <el-time-picker
                    is-range
                    v-model="tr.timeRange"
                    value-format="HH:mm"
                    format="HH:mm"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  >
                  </el-time-picker>
                </td>
                <td class="el-table__cell is-center">
                  <el-input
                    v-model="tr.value"
                    onkeyup="value=(isNaN(parseInt(value)) ? '' :  parseInt(value))"
                    style="width: 60%"
                  />
                </td>
                <td class="el-table__cell is-center">
                  <i
                    class="el-icon-plus mr10 cursor-pointer"
                    @click="handleAddTimeRange()"
                  ></i>
                  <i
                    class="el-icon-delete mr10 text-danger cursor-pointer"
                    @click="selectProject.timeRangeList.splice(index)"
                  ></i>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="handleSaveGoodsSetting">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import mixin from "./mixin";

export default {
  name: "ConfigItemReserveTimeRange",
  components: {
    draggable,
  },
  mixins: [mixin],
  props: ["activeData"],
  data() {
    return {
      dialogVisible: false,
      selectProjectIndex: 0,
      selectProject: {},
    };
  },
  methods: {
    addProjectItem() {
      this.activeData.reserveProjectList.push({
        id: new Date().getTime(),
        name: "项目",
        timeRangeList: [],
      });
    },
    handleSettingGoods(project, index) {
      this.selectProjectIndex = index;
      this.dialogVisible = true;
      let pro = JSON.parse(JSON.stringify(project));
      if (pro.timeRangeList.length === 0) {
        pro.timeRangeList.push({
          timeRange: null,
          value: 0,
        });
      }
      this.selectProject = pro;
    },
    handleSaveGoodsSetting() {
      this.$set(
        this.activeData.reserveProjectList,
        this.selectProjectIndex,
        this.selectProject
      );
      this.dialogVisible = false;
    },
    handleAddTimeRange() {
      this.selectProject.timeRangeList.push({
        timeRange: null,
        value: 0,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}

.option-drag {
  cursor: move;
}
</style>
